<template>
	<view class="bg-or height-100">
		<view class="position-relative">
			<!-- images -->
			<template v-if="goodsInfos.imageUrlList?.length">
				<swiper class="goodsSwiper" circular @change="change">
					<block v-for="(item,index) in goodsInfos.imageUrlList" :key="index">
						<swiper-item>
							<image :src="item" class="goodsBannerImg" mode="aspectFit"></image>
						</swiper-item>
					</block>
				</swiper>
				<view class="position-absolute bottom right margin-bottom margin-right">
					<text
						class="text-sm color-white button text-center padding-lr padding-tb-xs radius-sl bg-black-qq">{{current}}/{{goodsInfos.imageUrlList?.length}}</text>
				</view>
			</template>
		</view>
		<!-- goods infos -->
		<view class="padding bg-white">
			<view class="flex-direction-row">
				<view class="flex-sub">
					<text class="text-lg color-black text-bold">{{goodsInfos.productName}}</text>
				</view>
				<view class="margin-left flex-direction-row align-center">
					<template v-if="goodsInfos.isCollection == 1">
						<text class="text-xsl iconfont color-red" @click="collection()">&#xe63b;</text>
					</template>
					<template v-else>
						<text class="text-xsl iconfont color-black-q" @click="collection()">&#xe613;</text>
					</template>
					<button class="button-none margin-left-sm" open-type="share">
						<uni-icons type="redo-filled" size="26"></uni-icons>
					</button>
				</view>
			</view>
			<view class="flex-direction-row justify-between margin-top-sm">
				<text class="text-sm color-black-b">规格：{{specs.name}}</text>
				<text class="text-sm color-black-b">月售 {{goodsInfos.actualSalesVolume || 0}}</text>
			</view>
			<view class="flex-direction-row justify-between margin-tb">
				<view class="flex-direction-row align-end">
					<text class="text-xs color-df text-bold">￥</text>
					<text class="text-xxl text-bold color-red" style="margin-bottom: -8rpx;">{{goodsInfos.price}}</text>
					<!-- <text class="text-smd color-black-q strike-through-text margin-left-sm">￥{{specs.costPrice}}</text> -->
					<!-- <text class="text-xs radius bg-tags color-df margin-left">9.6折</text> -->
				</view>
				<template v-if="goodsInfos.specsResList?.length > 1">
					<view class="bg-red radius-sl flex-direction-row align-center but" @click="selectSpecsOpen">
						<text class="text-smd iconfont color-white">&#xe727;</text>
						<text class="text-smd color-white margin-left-xs">选规格</text>
					</view>
				</template>
				<template v-else>
					<view class="bg-red radius-sl flex-direction-row align-center but" @click="addCarts" id="carts">
						<text class="text-smd iconfont color-white">&#xe727;</text>
						<text class="text-smd color-white margin-left-xs">加入购物车</text>
					</view>
				</template>
			</view>
			<view class="padding-top border-top" v-if="goodsInfos.tip">
				<view class="flex-direction-row align-center margin-top-xss">
					<text class="text-df iconfont color-black-q">&#xebe5;</text>
					<text class="text-xsm color-black-q margin-left-xs">{{goodsInfos.tip}}</text>
				</view>
			</view>
		</view>
		<!-- 用药指导 -->
		<view class="margin-top-sm bg-white padding flex-direction-row align-center" @click="taboo">
			<view class="" style="width: 76rpx;">
				<text class="text-smd">用药指导</text>
			</view>
			<view class="flex-direction-row flex-sub">
				<view class="flex-sub padding-lr-sm border-left">
					<view class="flex-direction-row align-center">
						<text class="text-smd">主治功能</text>
						<text class="text-xss color-black-b iconfont margin-left-sm">&#xe6f3;</text>
					</view>
					<text class="text-xsm color-black-q text-cut2">{{goodsInfos.indicativeFunction}}</text>
				</view>
				<view class="flex-sub padding-lr-sm border-left">
					<view class="flex-direction-row align-center">
						<text class="text-smd">用法用量</text>
						<text class="text-xss color-black-b iconfont margin-left-sm">&#xe6f3;</text>
					</view>
					<text class="text-xsm color-black-q">{{goodsInfos.dosageMethod}}</text>
				</view>
			</view>
			<view class="padding-left-sm border-left" style="width: 50rpx;">
				<text class="text-smd color-df">更多</text>
			</view>
		</view>
		<!-- 套餐 -->
		<!-- <view class="margin-top-sm bg-white padding align-center">
			<view class="flex-direction-row">
				<text class="text-sm color-white bg-red margin-right-sm radius-sl padding-tb-xs padding-lr">套餐一</text>
				<text
					class="text-sm color-white bg-gray-b margin-right-sm radius-sl padding-tb-xs padding-lr">套餐二</text>
				<text
					class="text-sm color-white bg-gray-b margin-right-sm radius-sl padding-tb-xs padding-lr">套餐三</text>
				<text
					class="text-sm color-white bg-gray-b margin-right-sm radius-sl padding-tb-xs padding-lr">套餐四</text>
			</view>
			<view class="border-df radius-xl padding-sm margin-top">
				<view class="flex-direction-row radius-xl bg-gray padding-xs">
					<image
						src="https://mp-a1fa0c58-1b5a-42cb-85c9-7aa4106cbd85.cdn.bspapp.com/cloudstorage/27528e9f-981a-42a2-bec6-8e41334adfd2.jpg"
						class="cu-photo radius-xl" mode="aspectFit"></image>
					<view class="flex-direction-column justify-between padding-lr-sm flex-sub">
						<text class="text-sm">达菲磷酸奥司他韦胶囊 75mg*10粒</text>
						<view class="flex-direction-row align-end flex-sub">
							<text class="text-sm color-df">￥</text>
							<text class="text-lg color-df text-bold">39</text>
							<text class="text-sm color-df">.00</text>
						</view>
					</view>
					<view class="flex-direction-column justify-end margin-sm">
						<text class="text-xl iconfont color-df color-df">&#xe664;</text>
					</view>
				</view>
				<view class="text-center padding-tb-sm">
					<text class="text-xl iconfont color-red color-df">&#xe604;</text>
				</view>
				<view class="flex-direction-row radius-xl bg-gray padding-xs">
					<image
						src="https://mp-a1fa0c58-1b5a-42cb-85c9-7aa4106cbd85.cdn.bspapp.com/cloudstorage/27528e9f-981a-42a2-bec6-8e41334adfd2.jpg"
						class="cu-photo radius-xl" mode="aspectFit"></image>
					<view class="flex-direction-column justify-between padding-lr-sm flex-sub">
						<text class="text-sm">达菲磷酸奥司他韦胶囊 75mg*10粒</text>
						<view class="flex-direction-row align-end flex-sub">
							<text class="text-sm color-df">￥</text>
							<text class="text-lg color-df text-bold">39</text>
							<text class="text-sm color-df">.00</text>
						</view>
					</view>
					<view class="flex-direction-column justify-end margin-sm">
						<text class="text-xl iconfont color-df color-df">&#xe664;</text>
					</view>
				</view>
				<view class="bg-red flex-direction-row justify-between align-center radius-xl padding-sm margin-top-sm">
					<view class="flex-direction-row align-center">
						<text class="text-sm color-white">特惠套餐</text>
						<view class="flex-direction-row align-end flex-sub margin-lr">
							<text class="text-xs color-white" style="margin-bottom: 3rpx;">￥</text>
							<text class="text-lg color-white">39</text>
							<text class="text-xsm color-white" style="margin-bottom: 3rpx;">.00</text>
						</view>
						<text class="text-sm color-white text-small strike-through-text">￥130</text>
					</view>
					<view class="bg-white radius-sl padding-tb-xs padding-lr-sm flex-direction-row align-center">
						<text class="text-xs iconfont color-df">&#xe727;</text>
						<text class="text-xs color-df margin-left-xs">加入购物车</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 处方 -->
		<!-- <view class="flex-direction-row justify-between padding-tb-sm padding-lr bg-kf"
			@click="$navigator('/pages/prescription/patient')">
			<text class="text-xsm color-df">处方药开方后可在购物车结算</text>
			<text class="text-xsm color-white bg-df radius-sm" style="padding: 4rpx 8rpx;">免费开方</text>
		</view> -->
		<!-- 相关产品 -->
		<view class="margin-top-sm bg-white padding align-center">
			<text class="text-df">相关产品</text>
			<view class="flex-direction-row flex-wrap justify-between margin-top-sm">
				<block v-for='(item,index) in goodsList' :key='index'>
					<goods :item="item"></goods>
				</block>
			</view>
		</view>
		<!-- 购物车动效 -->
		<view class="flex-direction-row align-center justify-center bg-red position-absolute cartsClass"
			:style="{'top': TOP + 'px', 'left': LEFT + 'px' , 'transition': transition}">
			<text class="text-smd iconfont color-white">&#xe727;</text>
		</view>
		<!-- 购物车按钮 -->
		<view class="carts flex-direction-row justify-center align-center bg-or-l shadow radius-sl position-relative"
			id="ddd" :style="{'left': BUTLEFT + 'rpx'}" @click="carts">
			<!-- <text class="text-xl iconfont color-df">&#xe664;</text> -->
			<image src="../../static/images/cart.png" class="cu-avatar" mode="widthFix"></image>
			<!-- 角标 -->
			<text class="badeg bg-df color-white radius-sl">{{cartNum}}</text>
		</view>
		<!-- 选规格弹层 -->
		<uni-popup ref="specs" type="bottom" :safe-area="false">
			<view class="bg-white radius-ltr flex-direction-column" style="height: 76vh;">
				<view class="flex-direction-row justify-between">
					<text class="text-df"></text>
					<text class="text-df iconfont padding" @click="closePopup">&#xe602;</text>
				</view>
				<scroll-view scroll-y="true" style="height: 58vh;">
					<view class="padding">
						<view class="flex-direction-row">
							<image :src="imageUrl" mode="aspectFill" class="cu-photo flex-shrink"></image>
							<view class="flex-direction-column flex-sub margin-left">
								<view class="flex-direction-column flex-sub">
									<text class="text-lg color-black text-bold">{{goodsInfos.productName}}</text>
									<text class="text-smd margin-top-xs color-black-b">规格：{{specs.code}}</text>
								</view>
								<view class="flex-direction-row align-center">
									<text class="text-xsm color-df">￥</text>
									<text class="text-xsl color-df text-bold">{{specs.price}}</text>
								</view>
							</view>
						</view>
						<view class="flex-direction-row justify-between padding-tb">
							<text class="text-df text-bold color-black">数量</text>
							<uni-number-box v-model="productCount" :min="1" :max="99"></uni-number-box>
						</view>
						<text class="text-df padding-tb text-bold color-black">规格</text>
						<view class="flex-direction-row flex-wrap">
							<block v-for='(item,index) in goodsInfos.specsResList' :key='index'>
								<text class="text-df radius text-center padding-tb-xsm specs-button"
									:class="{'select-on':selectSpecsId == item.id}"
									@click="selectSpecs(item)">{{item.code}}</text>
							</block>
						</view>
					</view>
				</scroll-view>
				<view class="padding-tb-sm margin bg-df radius-sl text-center" @click="addCartsSpecs()">
					<text class="text-lg color-white">加入购物车</text>
				</view>
				<view class="padding-tb"></view>
			</view>
		</uni-popup>
		<!-- 用药指导弹层 -->
		<uni-popup ref="taboo" type="bottom" :safe-area="false">
			<view class="bg-white radius-ltr flex-direction-column" style="height: 76vh;">
				<view class="position-relative">
					<view class="text-center padding">
						<text class="text-df text-bold">用药指导</text>
					</view>
					<view class="position-absolute top right padding" @click="closePopup">
						<text class="text-df iconfont">&#xe602;</text>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: calc(76vh - 80rpx);">
					<view class="padding">
						<view class="radius-xl bg-popup padding">
							<view class="flex-direction-row align-end margin-bottom">
								<text class="text-xsl color-popup">用药贴士</text>
								<text
									class="text-xsm color-popup margin-left margin-bottom-xs">专家医生编审|安全科学用药|助力医疗服务</text>
							</view>
							<uni-table border stripe emptyText="暂无更多数据" class="radius-xl">
								<!-- <uni-tr>
									<uni-th width="100" align="center">主治功能</uni-th>
									<uni-th align="center">Jeson</uni-th>
								</uni-tr> -->
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">主治功能</text></uni-td>
									<uni-td>{{goodsInfos.indicativeFunction}}</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">用法用量</text></uni-td>
									<uni-td>{{goodsInfos.dosageMethod}}</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">用药禁忌</text></uni-td>
									<uni-td>{{goodsInfos.taboo}}</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">特殊人群</text></uni-td>
									<uni-td>{{goodsInfos.specialPeople}}</uni-td>
								</uni-tr>
								<uni-tr>
									<uni-td width="100" align="center"><text class="text-bold">储存条件</text></uni-td>
									<uni-td>{{goodsInfos.storageConditions}}</uni-td>
								</uni-tr>
							</uni-table>

						</view>
						<!-- 说明书 -->
						<view class="padding-tb-xl">
							<text class="text-xl">说明书</text>
						</view>
						<image :src="goodsInfos.instructionsUrl" style="width: 690rpx;" mode="widthFix"></image>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import goods from "@/components/goods.vue"
	import {
		addShoppingCart,
		shoppingCartList
	} from "@/common/cart.js"
	import {
		productDetial,
		queryProductList
	} from "@/common/mall.js"
	import {
		parseDateTime
	} from "@/common/tools.js"
	export default {
		onLoad(option) {
			// console.log('option: ',option.item);
			// this.goodsInfos = JSON.parse(option.item);
			console.log('option: ', option);
			// 获取购物车数量|数据
			if (this.$hasLogin()) {
				// 查询购物车数量
				// this.getCarts();
				// 查询商品的开方情况
				// this.getPrescriptionByProduct();
				// 新增足迹记录
				this.browsinghistory(option.id);
				// 如果是已经登录，且点击分享的参数中有userid，则可以请求share方法
				if (option.userId) {
					this.share(option.id, option.shareTime, option.userId);
					this.shareTime = option.shareTime
				} else {
					console.log(2222);
				}
			}
			if (option.id) {
				// 获取商品详情
				this.getDetail(option.id);
				this.goodsId = option.id
			} else {
				uni.showModal({
					title: '参数错误',
					showCancel: false
				});
			}
			// 此处移动到获取商品详情方法内
			// if(option.secondCategoryId){
			// 	this.queryProductList(option.secondCategoryId)
			// }

			// 监听登录成功
			uni.$on('loginStatusChange', data => {
				if (data.login == 'login') {
					this.getCarts();
				}
			});
		},
		onReady() {
			// console.log('uni.getSystemInfoSync(): ', uni.getSystemInfoSync());
			this.screenHeight = uni.getSystemInfoSync().screenHeight
			// console.log('this.screenHeight: ', this.screenHeight - 60);
		},
		onShareAppMessage(res) {
			// 获取当前时间
			let timestamp = new Date().getTime();
			let shareTime = parseDateTime(timestamp, 'dateTime');
			let userId;
			let path;
			if (this.$hasLogin()) {
				let userId = uni.getStorageSync('userinfo').id;
				path = '/pages/mall/goods?id=' + this.goodsId + '&shareTime=' + shareTime + '&userId=' + userId;
			} else {
				path = '/pages/mall/goods?id=' + this.goodsId + '&shareTime=' + shareTime;
			}
			// console.log('shareTime: ',shareTime);
			return {
				title: this.goodsInfos.productName,
				path: path,
				imageUrl: this.goodsInfos.imageUrl
			}
		},
		components: {
			goods
		},
		data() {
			return {
				goodsId: '',
				cartNum: 0,
				cartsStyle: {},
				position: 'absolute',
				TOP: -100,
				LEFT: -100,
				BUTLEFT: -50,
				transition: '',
				goodsInfos: {},
				specs: {},
				goodsList: [],
				current: 1,
				selectSpecsId: '',
				productCount: 1,
				imageUrl: ''
			}
		},
		methods: {
			async getDetail(id) {
				const res = await productDetial(id);
				console.log('getDetail res: ', res);
				this.goodsInfos = res
				this.specs = res.specsResList[0]
				this.imageUrl = this.specs?.imageUrlList[0]
				if (this.goodsInfos.secondCategoryId) {
					this.queryProductList(this.goodsInfos.secondCategoryId)
				}
			},
			async getCarts() {
				const res = await shoppingCartList(uni.getStorageSync('storeId'));
				// console.log('getCarts: ', res.rows);
				this.cartNum = res.rows?.length
			},
			async getPrescriptionByProduct() {
				let res = await uni.$request.post('/prescriptionApi/getPrescriptionByProduct', {
					storeId: uni.getStorageSync('storeId'),
					productCode: [this.goodsInfos.id]
				});
				console.log('getPrescriptionByProduct: ', res);
				// this.cartNum = res.rows?.length
			},
			change(e) {
				console.log('e: ', e.detail.current);
				this.current = e.detail.current + 1
			},
			async collection() {
				// 收藏操作
				const res = await uni.$request.post('/collectionInfo/add', {
					storeId: uni.getStorageSync('storeId'),
					prodcutId: this.goodsId
				});
				if (res.code == 200) {
					if (this.goodsInfos.isCollection === 0) {
						this.goodsInfos.isCollection = 1
						uni.showToast({
							title: '收藏成功',
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "已取消收藏",
							icon: "none"
						})
						this.goodsInfos.isCollection = 0
					}
				} else {
					if (this.goodsInfos.isCollection === 0) {
						uni.showModal({
							title: '提示',
							content: '收藏失败',
							showCancel: false
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '操作失败',
							showCancel: false
						});
					}
				}
			},
			async collectionCancel() {
				// 取消收藏操作
				const res = await uni.$request.get('/collectionInfo/cancel/' + this.goodsId, {});
				// console.log('collectionCancel res: ',res);
				if (res.code == 200) {
					uni.showToast({
						title: "已取消收藏",
						icon: "none"
					})
					this.goodsInfos.isCollection = 0
				} else {
					uni.showModal({
						title: '提示',
						content: '操作失败',
						showCancel: false
					});
				}
			},
			// 选规格弹窗
			selectSpecsOpen() {
				this.$refs.specs.open();
				this.specsOpen = true
			},
			selectSpecs(item) {
				this.selectSpecsId = item.id
				this.selectSpecsPrice = item.price
				this.imageUrl = item?.imageUrlList[0]
			},
			closePopup() {
				this.$refs.specs.close();
				this.$refs.taboo.close();
			},
			async browsinghistory(productId) {
				console.log('productId: ', productId);
				const res = await uni.$request.post('/browsinghistory/add', {
					'prodcutId': productId,
					'storeId': uni.getStorageSync('storeId')
				});
				console.log('browsinghistory res: ', res);
			},
			async addCarts() {
				if (!this.$hasLogin()) {
					uni.showModal({
						// title: '温馨提示',
						content: "请登录！",
						confirmText: "去登录",
						cancelText: "取消",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					});
					return;
				}
				// 添加购物车
				const res = await addShoppingCart({
					"productCount": 1,
					"specsId": this.specs.id,
					"salesPrice": this.specs.price,
					"storeId": uni.getStorageSync('storeId'),
					'shareId': this.shareId,
					'shareTime':this.shareTime
				});
				console.log('addCarts: ', res);
				if (res.code == 200) {
					this.addCartsAnim();
					this.cartNum++;
					// 通知购物车页面更新数据
					uni.$emit('cartUpdate');
				} else {
					uni.showModal({
						title: '提示',
						content: '添加购物车失败',
						showCancel: false
					});
				}
			},
			addCartsAnim() {
				const query = uni.createSelectorQuery().in(this);
				let left = 0
				let top = 0
				// 获取元素的位置信息
				query.select('#carts').boundingClientRect(rect => {
					// console.log('元素位置信息：', rect.left, rect.top);
					// 购物车动画效果
					if (this.isTransition) return;
					this.isTransition = true
					this.TOP = rect.top;
					this.LEFT = rect.left + 10;
					this.BUTLEFT = -10;
					setTimeout(() => {
						this.transition = "left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)"
						this.TOP = this.screenHeight - 60;
						this.LEFT = 0;
					}, 100);
					setTimeout(() => {
						this.transition = ""
						this.TOP = -100;
						this.LEFT = -100;
						this.isTransition = false;
						this.BUTLEFT = -50;
					}, 640);
				}).exec();
			},
			async addCartsSpecs() {
				// 添加规格不需要动画
				if (this.selectSpecsId === '') {
					uni.showToast({
						title: '请选择一种规格',
						icon: 'none'
					});
					return;
				}
				// 添加购物车
				const res = await addShoppingCart({
					"productCount": this.productCount,
					"specsId": this.selectSpecsId,
					"salesPrice": this.selectSpecsPrice,
					"storeId": uni.getStorageSync('storeId'),
					'shareId': this.shareId,
					'shareTime':this.shareTime
				});
				console.log('addcart data: ',{
					"productCount": this.productCount,
					"specsId": this.selectSpecsId,
					"salesPrice": this.selectSpecsPrice,
					"storeId": uni.getStorageSync('storeId'),
					'shareId': this.shareId,
					'shareTime':this.shareTime
				});
				console.log('addCartsSpecs: ', res);
				if (res.code == 200) {
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					});
					this.cartNum++;
					this.selectSpecsId = ''
					this.$refs.specs.close()
					this.productCount = 1
					setTimeout(function() {
						// 通知购物车页面更新数据
						uni.$emit('cartUpdate');
					}, 800);
				} else {
					uni.showModal({
						title: '提示',
						content: '添加购物车失败',
						showCancel: false
					});
				}
			},
			// 底部商品
			async queryProductList(categoryId) {
				const res = await queryProductList({
					'storeId': uni.getStorageSync('storeId'),
					'secondCategoryId': categoryId,
					'pageSize': 8
				});
				this.goodsList = res.rows
				// console.log('goodsList: ', this.goodsList);
			},
			carts() {
				uni.switchTab({
					url: "/pages/cart/cart"
				})
			},
			taboo() {
				this.$refs.taboo.open();
			},
			async share(productId, shareTime, userId) {
				uni.showLoading({
					mask: true
				});
				console.log('userId: ', productId, shareTime, userId);
				console.log('/miniProgram/share data',{
					'storeId': uni.getStorageSync('storeId'),
					'storeName': uni.getStorageSync('store').storeName
				});
				const res = await uni.$request.post('/miniProgram/share', {
					'productId': productId,
					'shareTime': shareTime,
					'shareUserId': userId,
					'storeId': uni.getStorageSync('storeId'),
					'storeName': uni.getStorageSync('store').storeName
				});
				uni.hideLoading();
				console.log('share res: ', res);
				// 如果返回了分享id
				this.shareId = res?.data?.id || ''
			}
		}
	}
</script>

<style scoped>
	.goodsSwiper {
		width: 750rpx;
		height: 750rpx;
		z-index: 1;
		overflow: hidden;
	}

	.goodsBannerImg {
		width: 750rpx;
		height: 750rpx;
	}

	.bg-tags {
		background-color: rgba(255, 238, 236, 1);
		padding: 6rpx 10rpx;
	}

	.specs-button {
		background: rgb(248, 248, 248);
		border: 1rpx solid #fff;
		width: 210rpx;
		margin-right: 18rpx;
		margin-top: 18rpx;
		color: #888;
	}

	.select-on {
		background-color: rgba(219, 64, 44, 0.06);
		border: 1rpx solid rgba(217, 55, 34);
		color: #d93722;
	}

	.bg-popup {
		background-color: #fffae6;
	}

	.color-popup {
		color: #ee7000;
	}

	.carts {
		position: fixed;
		left: -40rpx;
		bottom: 160px;
		width: 140rpx;
		height: 90rpx;
		/* padding-left: 20rpx; */
		transition: left .6s ease-in-out
	}

	.badeg {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 20rpx;
		padding: 2rpx 8rpx;
		border: 3rpx solid #fff;
		/* transition: left .6s linear; */
	}

	.but {
		height: 30px;
		padding: 0 10px;
	}

	.cartsClass {
		width: 30px;
		height: 30px;
		position: fixed;
		border-radius: 50%;
		/* transition: left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1) */
	}

	.cartsButtonClass {
		/* width: 50px;
		height: 50px;
		background-color: red;
		border-radius: 50%; */
		transition: left .6s linear
	}

	.bg-kf {
		background-color: rgba(255, 0, 0, 0.1);
	}
</style>